<template>
	<div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
		<!-- 背景装饰 -->
		<div class="fixed inset-0 overflow-hidden pointer-events-none">
			<div
				class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob">
			</div>
			<div
				class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000">
			</div>
			<div
				class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000">
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="container mx-auto px-12 py-10 pt-32 relative z-10">
			<!-- 顶部：返回与标题 -->
			<div class="flex items-center justify-between mb-10">
				<div class="flex items-center gap-4">
					<el-button type="primary" link @click="goBack" class="text-gray-600 hover:text-gray-800 text-lg">
						<el-icon class="mr-2 text-xl">
							<ArrowLeft />
						</el-icon>
						返回班级详情
					</el-button>
					<h1 class="text-4xl font-bold text-gray-900">班级视频</h1>
				</div>
			</div>

			<!-- 视频列表 -->
			<div class="bg-white rounded-3xl shadow-xl border border-gray-200 overflow-hidden">
				<div class="px-8 py-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
					<h3 class="text-2xl font-bold text-gray-900">视频列表</h3>
				</div>

				<div v-if="videoList.length === 0" class="py-20 text-center">
					<div class="w-24 h-24 mx-auto mb-4 text-gray-300">
						<el-icon class="text-6xl">
							<VideoPlay />
						</el-icon>
					</div>
					<p class="text-gray-500 text-lg">暂无视频内容</p>
				</div>

				<div v-else class="p-8">
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
						<div v-for="video in videoList" :key="video.id"
							class="bg-white rounded-2xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-all cursor-pointer"
							@click="handleVideoClick(video.id)">
							<div class="relative h-48 bg-gray-100">
								<div class="absolute inset-0 flex items-center justify-center">
									<el-icon class="text-6xl text-gray-400">
										<VideoPlay />
									</el-icon>
								</div>
								<div
									class="absolute bottom-3 right-3 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
									{{ formatDuration(video.duration) }}
								</div>
							</div>
							<div class="p-5">
								<h4 class="text-lg font-bold text-gray-900 mb-2 line-clamp-1">{{ video.title }}</h4>
								<p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ video.description }}</p>
								<div class="flex items-center justify-between text-sm text-gray-500">
									<span>{{ formatDate(video.uploadTime) }}</span>
									<span>{{ video.views }} 次观看</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ArrowLeft,
		VideoPlay
	} from '@element-plus/icons-vue'

	const router = useRouter()
	const route = useRoute()
	const classId = ref(route.params.classId)

	// 状态管理
	const videoList = ref([
		// 示例数据
		{
			id: 1,
			title: 'JavaScript 基础入门',
			description: '讲解JavaScript的基本语法和概念，适合初学者',
			duration: 1250, // 秒数
			uploadTime: new Date().toISOString(),
			views: 128
		},
		{
			id: 2,
			title: 'Vue3 组件化开发',
			description: '深入理解Vue3的组件化思想和实践方法',
			duration: 1820,
			uploadTime: new Date(Date.now() - 86400000).toISOString(),
			views: 89
		}
	])

	// 生命周期
	onMounted(() => {
		// 实际项目中这里应该调用API获取视频列表
		console.log(`获取班级 ${classId.value} 的视频列表`)
	})

	// 方法
	const goBack = () => {
		router.push(`/class/${classId.value}`)
	}

	const handleVideoClick = (videoId) => {
		// 处理视频点击事件，跳转到视频播放页或直接播放
		router.push(`/class/${classId.value}/video/${videoId}`)
	}

	// 工具函数
	const formatDuration = (seconds) => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
	}

	const formatDate = (dateString) => {
		const date = new Date(dateString)
		return date.toLocaleString()
	}
</script>

<style scoped>
	/* 动画效果 */
	.animate-blob {
		animation: blob-morph 8s linear infinite;
	}

	.animation-delay-2000 {
		animation-delay: 2s;
	}

	.animation-delay-4000 {
		animation-delay: 4s;
	}

	@keyframes blob-morph {

		0%,
		100% {
			transform: scale(1) translate(0, 0);
		}

		25% {
			transform: scale(1.1) translate(20px, -20px);
		}

		50% {
			transform: scale(0.9) translate(0, 20px);
		}

		75% {
			transform: scale(1.05) translate(-20px, 10px);
		}
	}
</style>